<template>
  <i-drawer mode="right" :visible="showRight1" @close="toggleRight1">
    <view class="demo-container">
      <slot name="drawer"></slot>
    </view>
  </i-drawer>
</template>

<script>
  export default {
    name: "drawer",
    data() {
      return {
        name: '',
        showRight1: false,
        fruit: [
          {id: 1, name: '香蕉'},
          {id: 2, name: '苹果'},
          {id: 3, name: '西瓜'},
          {id: 4, name: '葡萄'}
        ],
        current: ['苹果', '葡萄'],
        position: 'left'
      }
    },
    methods: {
      toggleRight1() {
        this.showRight1 = !this.showRight1
      },
      handleFruitChange(event) {
        const index = this.current.indexOf(event.mp.detail.value);
        index === -1 ? this.current.push(event.mp.detail.value) : this.current.splice(index, 1);
        this.current =  this.current
        this.name = this.current
      },
      components: {}
    }
  }
</script>

<style scoped>

</style>
